import React, { useEffect, useState } from "react";
import { Button, Descriptions } from "antd";

function MainTyreSelect(props) {
  const [W, setW] = useState(null);
  const [F_1, setF_1] = useState(null);
  const [V, setV] = useState(null);
  const [mainMaxLoad, setMainMaxLoad] = useState(null);
  const calculate = () => {
    const mainMaxLoad = F_1 * 1.25 / props.mainTyreNum;
    setMainMaxLoad(mainMaxLoad);
  };
  useEffect(() => {
    setW(props.W);
    setF_1(props.F_1);
    setV(props.V);
    console.log("props.mainTyreNum", props.mainTyreNum);
  }, []);
  return (
    <div style={{ width: "100%", margin: "10px 0 10px 0" }}>
      <div>
        <h3 style={{
          fontWeight: "bold",
          fontSize: "18px",
          display: "inline-block",
          width: "80px"
        }}>输入参数</h3>
        <Button onClick={calculate} type={"primary"} style={{ paddingLeft: "10px" }}>计算</Button>
      </div>
      <Descriptions bordered column={4}>
        <Descriptions.Item label="飞机的最大总重(kg)" span={2}>{W}</Descriptions.Item>
        <Descriptions.Item label="主起落架最大停机载荷(kN)" span={2}>{F_1}</Descriptions.Item>
        <Descriptions.Item label="飞机地面最大速度(km/h)" span={2}>{V}</Descriptions.Item>
      </Descriptions>
      <h3 style={{
        fontWeight: "bold",
        fontSize: "18px",
        display: "inline-block",
        width: "80px"
      }}>计算结果</h3>
      <Descriptions bordered column={2}>
        <Descriptions.Item label="主起落架轮胎载荷(kN)" span={2}>{mainMaxLoad}</Descriptions.Item>
      </Descriptions>
    </div>

  );
}

export default MainTyreSelect;
